<template>
  <!-- 设备信息 -->
  <view class="deviceInfoList">
    <view class="content">
      <view class="wrapper-content">
        <scroll-view
          scroll-y="true"
          :style="[
            {
              height: '100%',
            },
          ]"
          v-if="dataSource.length"
        >
          <block v-for="(item, i) in dataSource" :key="i">
            <view class="wrapper-item" v-if="item.device.length">
              <view class="napeName" v-if="item.device.length">
                {{ item.deviceConfigName }}
              </view>
              <view><u-line></u-line></view>
              <view class="napeAll">
                <view
                  v-for="(v, j) in item.device"
                  :key="j"
                  class="nape-item"
                  :style="{
                    borderBottom:
                      j + 1 != item.device.length ? '1px solid #e6e6e6' : '',
                  }"
                >
                  <view class="nape-left">
                    <image
                      v-if="removeDevice"
                      :src="baseImgUrl + 'dele-icon.png'"
                      class="deleClass"
                      @click="deleteHandle(i, j, v.deviceId)"
                    ></image>
                    <image :src="v.deviceImage" mode="aspectFill"></image>
                  </view>
                  <view class="wrapper-facility" style="margin-left: 20rpx">
                    <view class="facility-item">
                      <view class="textAlign label">设备名称：</view>
                      <view class="value valueName">
                        {{ v.deviceName || "" }}
                      </view>
                    </view>
                    <view class="facility-item">
                      <view class="textAlign label">设备编号：</view>
                      <view class="value valueName">
                        {{ v.deviceNo || "" }}
                      </view>
                    </view>
                    <view class="facility-item">
                      <view class="textAlign label">设备数量：</view>
                      <view class="value valueName">
                        {{ v.deviceCount || "" }}
                      </view>
                    </view>
                    <view class="facility-item">
                      <view class="textAlign label">过期时间：</view>
                      <view class="value valueName">
                        {{ v.expirationTime || "无" }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </block>
          <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
        </scroll-view>
        <view v-if="!dataSource.length">
          <u-empty
            mode="list"
            text="还没有添加设备！"
            :icon="baseImgUrl + 'no-icon4.png'"
          >
          </u-empty>
        </view>
      </view>
    </view>

    <view class="btns">
      <button
        v-if="!dataSource.length"
        class="submit-btn"
        type="primary"
        :data-url="`/deviceInfo/deviceNew/deviceNew?companyMessageId=${options.companyMessageId}&companyName=${options.companyName}`"
        @click="handleClickRouter"
        icon="map"
        style="width: 100%"
      >
        + 添加设备信息
      </button>
      <block v-else>
        <block v-if="!removeDevice">
          <button
            class="remove-btn lt"
            type="primary"
            @click="removeDevice = true"
          >
            删除设施
          </button>
          <button
            class="lookbtn"
            style="border-radius: 44rpx"
            type="primary"
            :data-url="`/deviceInfo/deviceNew/deviceNew?companyMessageId=${options.companyMessageId}&companyName=${options.companyName}`"
            @click="handleClickRouter"
          >
            新增设施
          </button>
        </block>

        <block v-else>
          <button
            class="reset-btn lt cancelBtn"
            type="primary"
            @click="cancelHandle"
          >
            取消
          </button>
          <button class="submit-btn" type="primary" @click="cancelSave">
            保存
          </button>
        </block>
      </block>
    </view>
  </view>
</template>

<script>
import { equipmentList, featuredEquipmentDelete } from "@/api/home.js";
import { handleClickRouter, Toast } from "@/utils/util.js";

export default {
  name: "deviceInfoList",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      options: {},
      removeDevice: false, //删除icon
      deviceId: [],
      dataSource: [],
    };
  },
  onLoad(options) {
    this.options = options;
    uni.setNavigationBarTitle({
      title: options.companyName + "-设备信息",
    });
  },
  onShow() {
    this.getList();
  },
  methods: {
    handleClickRouter,
    // 删除
    deleteHandle(i, j, deviceId) {
      this.deviceId.push(deviceId);
      this.dataSource[i].device.splice(j, 1);
    },
    cancelHandle() {
      this.deviceId = [];
      this.removeDevice = false;
      this.getList();
    },
    cancelSave() {
      featuredEquipmentDelete(this.deviceId).then((res) => {
        if (res.code == 200) {
          // Toast("删除成功");
          setTimeout(() => {
            this.cancelHandle();
          }, 1000);
        }
      });
    },
    getList() {
      this.dataSource = [];
      equipmentList({ companyMessageId: this.options.companyMessageId }).then(
        (res) => {
          this.dataSource = this.dataSource.concat(res.result || []);
        }
      );
    },
  },
};
</script>

<style lang="scss">
.deviceInfoList {
  flex: 1;
  background-color: #f9f9f9;

  .content {
    margin: 0 auto;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
    width: calc(100% - 35rpx);
    height: calc(100vh - 93px);
    overflow-y: auto;
  }

  .wrapper-content {
    // height: calc(100vh - 93px);

    .wrapper-item {
      margin-top: 15rpx;
      padding: 30rpx 20rpx;
      background: #ffffff;
      .napeName {
        padding-top: 10rpx;
        padding-bottom: 20rpx;
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .napeAll {
      flex-wrap: wrap;

      .nape-item {
        display: flex;
        padding: 25rpx 0;
      }

      .nape-left {
        position: relative;

        image {
          width: 200rpx;
          height: 200rpx;
        }

        .deleClass {
          position: absolute;
          top: -10px;
          right: -8px;
          width: 36rpx;
          height: 36rpx;
        }
      }
    }
  }
}
</style>
